<script setup lang="ts">
import { onMounted } from 'vue'

onMounted(() => {
  window.addEventListener('keydown', (event: KeyboardEvent) => {
    // esc
    if (event.keyCode === 27) {
      exit()
    }
  })
})

const exit = () => {
  window.electron.ipcRenderer.send('close-color-extranction')
}
</script>

<template>
  <div class="color-extraction">
    <main>
      <input type="color" />
    </main>
  </div>
</template>

<style lang="scss" scoped>
input {
  @apply hidden;
}
input[type='color'] {
  -webkit-appearance: none;
  border: none;
  padding: 0;
  border-radius: 2px;
  width: 30px;
}

input[type='color']::-webkit-color-swatch-wrapper {
  padding: 0;
  margin: 0;
}

input[type='color']::-webkit-color-swatch {
  border: none;
  border-radius: 2px;
}
</style>
